<script setup lang="ts">
import {ToggleGroup, ToggleGroupItem} from '@/components/common/shadcn';

defineOptions({
  name: 'PreferenceColorMode',
});

const modelValue = defineModel<string | undefined>('themeRadius', {
  default: '0.5',
});

const items = [
  {label: '0', value: '0'},
  {label: '0.25', value: '0.25'},
  {label: '0.5', value: '0.5'},
  {label: '0.75', value: '0.75'},
  {label: '1', value: '1'},
];
</script>

<template>
  <ToggleGroup
      v-model="modelValue"
      class="gap-2"
      size="sm"
      type="single"
      variant="outline"
  >
    <template v-for="item in items" :key="item.value">
      <ToggleGroupItem
          :value="item.value"
          class="data-[state=on]:bg-primary data-[state=on]:text-primary-foreground h-7 w-16 rounded-sm"
      >
        {{ item.label }}
      </ToggleGroupItem>
    </template>
  </ToggleGroup>
</template>
